import React,{Component} from "react";
import {Link, withRouter} from 'react-router-dom';
import {Button, message} from "antd";
import ajax from "../ajaxMethod";
import '../assets/stylesheets/login.css';
import  NodeRSA from 'node-rsa';
import config from "../config";

class Login extends Component{
    constructor(props){
        super(props);
        this.state = {
            values:{
                username:"",
                password:"",
                QZcode:"",
            },
            captchaText:"",
        }
    }
    componentDidMount(){
        // localStorage.removeItem("username");
        this.getCaptcha();
    }
    getCaptcha = () =>{
        let _this = this;
        ajax.getAjax("/interface/login/captcha",{},res=>{
            if(res.success){
                let captcha = document.getElementById("captcha");
                captcha.innerHTML = res.data.data;
                _this.setState({captchaText: res.data.text})
            }else{
                console.error(res.description);
            }
        },err=>{
            console.error(err);
        })
    }
    onUsernameChange = (e =>{ this.setState({values:{...this.state.values, username: e.target.value}}); })
    onPasswordChange = (e =>{ this.setState({values:{...this.state.values, password: e.target.value}}); })
    onQZcodeChange = (e =>{ this.setState({values:{...this.state.values, QZcode: e.target.value}}); })
    onSubmit = (e) =>{
        let path = { 
                pathname:"/",username:this.state.values.username
            },
            pathManage = {
                pathname:"/management", username:this.state.values.username
            },
            values = this.state.values,
            jsenc = new NodeRSA(config.publicKey),//设置密匙
            password = jsenc.encrypt(values.password, 'base64'),
            _this = this;
        
        //判断输入的验证码是否正确，不区分大小写。
        if(values.QZcode.toUpperCase() === this.state.captchaText.toUpperCase()){
            ajax.postAjax("/interface/login",{username: values.username, password: password},res=>{
                if(res.success){
                    if(res.data.state === 0){
                        message.success("登录成功");
                        if(res.data.admin){
                            localStorage.setItem("manage",this.state.values.username);
                            this.props.history.push(pathManage);
                        }else{
                            localStorage.setItem("username",this.state.values.username);
                            this.props.history.push(path);
                        }
                    }else if(res.data.state === 1){
                        //刷新验证码
                        message.error("用户名或密码错误");
                        _this.setState({values:{...this.state.values, QZcode:""}});
                        _this.getCaptcha();
                    }
                }else{
                    message.error("登录失败，请联系管理员1");
                    _this.setState({values:{...this.state.values, QZcode:""}});
                    _this.getCaptcha();
                    console.error(res.description);
                }
            },err=>{
                message.error("登录失败，请联系管理员2");
                _this.setState({values:{...this.state.values, QZcode:""}});
                _this.getCaptcha();
                console.error(err);
            })
        }else{//验证码不正确就重新获取一个
            message.error("验证码不正确");
            this.setState({values:{...this.state.values, QZcode:""}});
            this.getCaptcha();
        }
    }
    
    render(){
        let values = this.state.values;
        return(
        <div id="login">
            <div className="top">
                <div>
                    <Link to="/"><i className="logo"></i></Link>
                </div>
            </div>
            <div className="content-box">
                <div className="left">
                    <i className="login-img"></i>
                </div>
                <div className="right">
                    <h2>用户登录</h2>
                    <div className="infors">
                        <input type="text" name="" className="w-input" value={values.username} onChange={this.onUsernameChange} placeholder="请输入用户名/邮箱" />
                        <input type="password" name="" className="w-input" value={values.password} onChange={this.onPasswordChange} placeholder="请输入密码" />
                        <span className="qz-img" id="captcha" onClick={this.getCaptcha}></span>
                        <input type="text" name="" className="h-input" placeholder="不区分大小写" value={values.QZcode} onChange={this.onQZcodeChange} />
                        <Button onClick={this.onSubmit}>登 录</Button>
                        <p><Link to="/password"><u>忘记密码</u></Link></p>
                    </div>
                </div>
            </div>
        </div>
        )
    }
}

export default withRouter(Login)